<template>
  <div class="score">
    <div class="header">
      <div style="width: 203px;"></div>
      <div></div>
      <!-- <el-button type="success" :icon="Bell">24年录取数据陆续整理上传中，预计6月份更新完成</el-button> -->
      <el-select
        v-model="selectYear"
        placeholder="选择年份"
        @change="yearChange"
      >
        <el-option
          :label="ele"
          :value="ele"
          :key="ele"
          v-for="ele in yearOptions"
        ></el-option>
      </el-select>
    </div>
    <div class="table">
      <el-card  shadow="hover">
        <template #header>
          <div class="card-header">
            <span>录取分析</span>
          </div>
        </template>
        <div class="mohu" style="padding: 20px">
          <el-table
            v-loading="loading"
            stripe
            element-loading-text="数据加载中..."
            empty-text="暂无数据，请重新选择条件查询"
            :data="tableData"
            style="width: 100%"
          >
            <el-table-column prop="yzylqrs" label="一志愿人数" />
            <el-table-column prop="tjrs" label="调剂人数" />
            <el-table-column prop="lqzdf" label="最低分（排除专项计划）" />
            <el-table-column prop="lqzgf" label="最高分" />
            <el-table-column prop="jyfs" label="建议分" />
          </el-table>
          <div v-if="isUnlock" class="mohu-filter">
            <el-button type="success" @click="onUnlock">
              <el-icon class="el-icon--right"><Key /></el-icon>
              <span>解锁</span>
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
    <div class="con">
      <div
        v-loading="loading"
        element-loading-text="数据加载中..."
        style="margin-top: 30px"
      >
        <el-card shadow="hover">
          <template #header>
            <div class="card-header">
              <span>复试分析</span>
            </div>
          </template>
          <div class="mohu" style="padding: 20px">
            <div class="text">
              <!-- 进复试人数2人，拟录取2人， -->
							<div class="proportion">
                <div>
                  复录比为{{formData.fuluRaio == null ? 0 : formData.fuluRaio}}。
                </div>
                <el-icon  class="proportion-icon" size="22px" @click="onProportion" color="#F56C6C"><QuestionFilled /></el-icon>
              </div>
              <br />
              进复试最低分 {{formData.fuLowScore == null ? 0 : formData.fuLowScore}}，进复试最高分 {{formData.fuHighScore == null ? 0 : formData.fuHighScore}}，进复试中位分 {{formData.fuMedianScore == null ? 0 : formData.fuMedianScore}}。
						</div>
            <div v-if="isUnlock" class="mohu-filter">
              <el-button type="success" @click="onUnlock">
                <el-icon class="el-icon--right"><Key /></el-icon>
                <span>解锁</span>
              </el-button>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!-- <div class="con mohu">
      <div v-loading="loading" element-loading-text="数据加载中..." class="charts"></div>
			<div v-if="isUnlock" class="mohu-filter">
        <el-button type="success" @click="onUnlock">
          <el-icon class="el-icon--right"><Key /></el-icon> <span>解锁</span>
        </el-button>
      </div>
    </div> -->
  </div>
</template>
<script setup>
import {
  Bell,
} from "@element-plus/icons-vue";
import * as Echarts from "echarts";
import { onMounted, defineProps, ref } from "vue";
import { scoreAnalysis, fuluStudentAnalysis } from "@/api/api";
import { decrypt } from "@/utils/parseDate";
import { defineEmits } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/theme-chalk/el-message-box.css";
const emit = defineEmits(["onChange"]);
import { useStore } from "vuex";
const store = useStore();
// 点击解锁
function onUnlock() {
  emit("onChange", { isUnlock: true });
}
const props = defineProps({
  majorId: String,
});
// 数据加载中
const loading = ref(false);
const chartArray = ref([]);
const chartObj = ref({});
const selectYear = ref("");
const yearOptions = ref([]);
const tableData = ref([]);
const formDataList = ref([]);
const formData = ref({});
// 所有数据
const allData = ref([]);
// 将 myMethod 暴露给父组件
defineExpose({ childMethod });
function childMethod() {
  getScoreAnalysis();
}
onMounted(() => {
  getScoreAnalysis();
});
function onProportion() {
  ElMessageBox.confirm("复录比=已知复试人数/录取名单人数。部分学校的调剂录取名单可能没有统计在复试名单中，所以部分学校复录比可能小于1", {
    confirmButtonText: "确定",
    title: "提示",
    type: "warning",
    center: true,
    closeOnClickModal: false,
  })
    .then(() => {
      
    })
    .catch(() => {
      
    });
}
// 是否显示模糊效果
const isUnlock = ref(false);
async function getFuluStudentAnalysis() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await fuluStudentAnalysis(data);
    const res = JSON.parse(decrypt(result));
    console.log(res,9);
    if (res.status === 0 && res.result.length > 0) {
      formDataList.value = res.result;
      formData.value = res.result.filter((ele) => ele.year == selectYear.value)[0];
      loading.value = false;
    } else {
      
    }
  } catch (error) {
    // throw new Error(error)
  }
}
// 获取分数分析数据
async function getScoreAnalysis() {
  try {
    loading.value = true;
    const data = {
      majorOutRelationId: props.majorId,
    };
    const result = await scoreAnalysis(data);
    const res = JSON.parse(decrypt(result));
    console.log(res);
    if (res.status == 8) {
      store.commit("setTipsDialog", true);
    }
    if (res.status == 9) {
      store.commit("setNumberDialog", true);
    }
    if (res.status == 666) {
      ElMessage({
        message: res.msg,
        type: "warning",
        showClose: true,
      });
      isUnlock.value = true;
      emit("onChange", { isUnlock: true });
      tableData.value = [
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
        {
          yzylqrs: "请解锁查看",
          tjrs: "请解锁查看",
          lqzdf: "请解锁查看",
          lqzgf: "请解锁查看",
          jyfs: "请解锁查看",
        },
      ];
      loading.value = false;
    }
    if (res.status === 0 && res.result.length > 0) {
      const yearList = [...new Set(res.result.map((ele) => ele.ssnf))];
      yearOptions.value = yearList.reverse();
      allData.value = res.result;
      console.log(yearOptions.value)
      let lists = res.result.sort(mysort("ssnf"))
      for (let index = 0; index < lists.length; index++) {
        const item = lists[index];
        let zdf = Number(item.lqzdf)
        let zgf = Number(item.lqzgf)
        let jyf = Number(item.jyfs)
        if (item.yzylqrs > 0 || item.tjrs > 0 || zdf > 0 || zgf > 0 || jyf > 0) {
          selectYear.value = item.ssnf;
          break
        }else{
          selectYear.value = yearList[0];
        }
      }
      console.log(selectYear.value,'年份')
      tableData.value = res.result.filter((ele) => ele.ssnf == selectYear.value);
      loading.value = false;
      isUnlock.value = false;
      getFuluStudentAnalysis();
    } else {
      tableData = [];
      allData = [];
      selectYear.value = "";
      yearOptions.value = [];
      loading.value = false;
    }
    // if(res.status === 0 && res.result.length>0){
    // 	isUnlock.value = false;
    // 	chartArray.value = res.result.reverse()
    // 	const yearList = [...new Set(chartArray.value.map(ele=>ele.ssnf))]
    //   yearOptions.value = yearList
    // 	chartObj.value = chartArray.value[0]
    // 	selectYear.value = chartObj.value.ssnf
    // 	initCharts(chartObj.value)
    // } else {
    // 	// defaultYear.value = new Date()
    // 	chartArray.value = []
    // 	chartObj.value = {
    // 		yzylqrs:0,
    // 		tjrs: 0,
    // 		lqzdf: 0,
    // 		lqzgf: 0,
    // 		jyfs: 0
    // 	}
    // 	initCharts(chartObj.value)
    // }
    // if (res.status == 666) {
    // 	ElMessage({
    //     message: res.msg,
    //     type: "warning",
    //     showClose: true,
    //   });
    // 	isUnlock.value = true;
    //   emit("onChange", { isUnlock: true });
    // 	chartArray.value = []
    // 	chartObj.value = {
    // 		yzylqrs: 20,
    // 		tjrs: 20,
    // 		lqzdf: 20,
    // 		lqzgf: 20,
    // 		jyfs: 20
    // 	}
    // 	initCharts(chartObj.value)
    // }
    // loading.value = false
  } catch (error) {
    loading.value = false;
    // throw new Error(error)
  }
}
function mysort(i) {   
    return function(a,b) {
       return b[i] - a[i] 
     }
}
// 改变年份
function yearChange(val) {
  selectYear.value = val;
  const res = allData.value.filter((ele) => ele.ssnf == val);
  tableData.value = res;
  formData.value = formDataList.value.filter((ele) => ele.year == val)[0];
  // loading.value = true
  // if(!val){
  // 	chartObj.value = chartArray.value[0]
  // 	selectYear.value = new Date(chartObj.value.ssnf)
  //   initCharts(chartObj.value)
  // 	return
  // }
  // const find = chartArray.value.find(ele=>ele.ssnf === val)
  // if(find){
  // 	initCharts(find)
  // } else {
  // 	initCharts({
  // 		yzylqrs:0,
  // 		tjrs: 0,
  // 		lqzdf: 0,
  // 		lqzgf: 0,
  // 		jyfs: 0
  // 	})
  // }
  // loading.value = false
}
// 初始化图表
function initCharts(obj) {
  const myChart = Echarts.init(document.querySelector(".charts"));
  // 绘制图表
  myChart.setOption({
    tooltip: {},
    xAxis: {
      data: ["一志愿人数", "调剂人数", "最低分", "最高分", "建议分"],
    },
    yAxis: {
      minInterval: 1,
    },
    series: [
      {
        type: "bar",
        data: [obj.yzylqrs, obj.tjrs, obj.lqzdf, obj.lqzgf, obj.jyfs],
      },
    ],
  });
}
</script>
<style lang="less" scoped>
.card-header{
	font-weight: bold;
}
.score {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // text-align: right;
  }
  .con {
    .charts {
      width: 100%;
      height: 320px;
    }
		.text{
			font-size: 18px;
      .proportion{
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .proportion-icon{
          cursor: pointer;
        }
      }
		}
    ::v-deep .el-card__body {
      padding: 0 !important;
    }
  }
}
.mohu {
  position: relative;
  z-index: 9;
}
.table {
  margin-top: 20px;
  ::v-deep .el-card__body {
    padding: 0 !important;
  }
}
.mohu-filter {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  background-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
